import React, { Component } from 'react'
import { DEL_TODO, UPDATE_TODO } from './store/types'
import { connect } from 'react-redux'
class Content extends Component {
  render() {
    console.log(this.props.todoList);
    return (
      <ul>
        {
          this.props.todoList.map(item => {
            return (<li key={item.id}>
              <input checked={item.isSelect} onChange={(e)=>{
                const obj = {
                  ...item,
                  isSelect: e.target.checked
                }
                // 更新到全局状态管理中
                this.props.update(obj)
              }} type="checkbox" />
              <h5>{item.title}</h5>
              <button onClick={()=>{
                this.props.del(item)
              }}>删 除</button>
            </li>)
          })
        }
      </ul>
    )
  }
}


export default connect((state)=>{
  return {
    todoList: state.todo.todoList
  }
},(dispatch)=>{
  return {
    update(item){
      dispatch({type: UPDATE_TODO, payload: item})
    },
    del(item){
      dispatch({type: DEL_TODO, payload: item})
    }
  }
})(Content)
